<template>

	<view class="container">
		<view>
			<view class="nihi"></view>
			<view class="zhujian">
				<view class="botton">
						<view class="tt">
							<view class="circle">
								<image src="../../static/my/avatar.jpg" style="width: 113rpx; height: 113rpx;"></image>
							</view>
						</view>
						<view class="content">
							<view class="word2">{{username}}</view>
							<view class="word1">{{dept}}&nbsp;&nbsp;I&nbsp;&nbsp;{{post}}&nbsp;&nbsp;I&nbsp;&nbsp;{{role}}
							</view>
						</view>
						<view class="content1" @click="ViewAccount">
							<view class="word" >账号</view>
							<view style="margin-right: 40rpx; color: #9d9d9d;">{{zhanghoa}}</view>
						</view>
						<view class="content1" @click="openPopup">
							<view class="word" >修改密码</view>
							<image src="../../static/my/ListRightArrows.jpg" class="xx"></image>
						</view>
						<view class="content1" @click="openLogoutPopup">
					<view class="word">退出登录</view>
					<image src="../../static/my/ListRightArrows.jpg" class="xx"></image>
				</view>
			</view>
		
			</view>

		</view>
		<!-- 弹窗组件 -->
		<uni-popup ref="popupRef" type="dialog">
			<view class="popup-content">
				<form @submit.prevent="submitForm">
					<view>
						<label for="oldPassword">旧密码：</label>
						<view class="my-view">
						<input v-model="user.oldPassword" id="oldPassword" type="password" placeholder="请输入旧密码"  class="my-input"/>
						</view>
					</view>

					<view>
						<label for="newPassword">新密码：</label>
						<view class="my-view">
						<input v-model="user.newPassword" id="newPassword" type="password" placeholder="请输入新密码"  class="my-input"/>
						</view>
					</view>

					<view>
						<label for="confirmPassword">确认密码：</label>
						<view class="my-view">
						<input v-model="user.confirmPassword" id="confirmPassword" type="password" class="my-input" placeholder="请确认新密码" />
						</view>
					</view>

					<view>
						<button type="submit" @click="submitForm">提交</button>
					</view>
				</form>
			</view>
		</uni-popup>
	<!-- 退出确认弹窗 -->
		<uni-popup ref="logoutPopupRef" type="dialog">
			<view class="popup-content">
				<view>确定要退出登录吗？</view>
				<view class="popup-actions">
					<button @click="confirmLogout" class="confirm-button">确认</button>
					<button @click="closeLogoutPopup" class="cancel-button">取消</button>
				</view>
			</view>
		</uni-popup>

	</view>



</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue"
	import {
		UserDetails
	} from "@/store/UserDetails.js"
	import {
		useInfoStore
	} from '@/store/user.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		updateUserPwd
	} from "@/api/login.js"
	// 获取 uni-popup 的 ref
	const popupRef = ref(null);
// 退出确认弹窗 ref
	const logoutPopupRef = ref(null);
	const user = ref({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	});
	//用户信息
	const UserDetail = UserDetails();
	//App-Token
	const userInfo = useInfoStore();
	const username = ref('');
	const post = ref('');
	const role = ref('');
	const dept = ref('');
	const zhanghoa = ref('')
	const FetchFromTheUserDetailsCache = () => {
		// 确保 UserDetail.UserText 存在
		const user = UserDetail?.UserText;

		// 获取岗位数据
		const posts = user.posts;
		//获取角色信息
		const roles = user.roles;

		if (user) {
			// 提取用户信息并赋值
			username.value = user.data.nickName || '用户名';
			zhanghoa.value = user.data.userName||'账号'
			// 如果有岗位数据，使用 postIds 查找岗位名称
			post.value = user.postIds && user.postIds.length > 0 ?
				posts.find(post => post.postId === user.postIds[0])?.postName || '岗位' :
				'岗位'; // 如果没有岗位数据，返回默认值

			// 获取第一个角色
			role.value = user.roleIds && user.roleIds.length > 0 ?
				roles.find(role => role.roleId === user.roleIds[0])?.roleName || '角色' :
				'角色';

			// 获取部门名称
			dept.value = user.data.dept?.deptName || '部门';
		} else {
			// 如果没有用户数据，可以设置默认值
			username.value = '用户名';
			post.value = '职位';
			role.value = '角色';
			dept.value = '部门';
		}
	};
	const submitForm = async () => {
		// 校验密码是否匹配
		if (!user.value.oldPassword || !user.value.newPassword || !user.value.confirmPassword) {
			uni.showToast({
				title: '请输入所有数据',
				icon: 'none',
			});
			return;
		}

		if (user.value.newPassword !== user.value.confirmPassword) {
			uni.showToast({
				title: '新密码与确认密码不匹配',
				icon: 'none',
			});
			return;
		}
	if (user.value.newPassword.length < 5) {
    uni.showToast({
        title: '新密码必须至少包含5个字符',
        icon: 'none',
    });
    return;
	}
		console.log(user.value.oldPassword);
		console.log(user.value.newPassword);

		// 调用更新密码的接口
		const res = await updateUserPwd(user.value.oldPassword, user.value.newPassword);

		if (res.code === 200) {
			// 密码修改成功
			uni.showToast({
				title: res.msg,
				icon: 'success',
			});
			// 清空表单
			user.value.oldPassword = '';
			user.value.newPassword = '';
			user.value.confirmPassword = '';
		} else {
			// 密码修改失败
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
			user.value.oldPassword = '';
			user.value.newPassword = '';
			user.value.confirmPassword = '';
		}
	};

	onMounted(() => {
		FetchFromTheUserDetailsCache();
	})
	onShow(() => {
		FetchFromTheUserDetailsCache();
	})
	//账号按钮
	const ViewAccount = () => {

	}
		// 打开退出确认弹窗
		const openLogoutPopup = () => {
			logoutPopupRef.value.open();
		};
	
		// 关闭退出确认弹窗
		const closeLogoutPopup = () => {
			logoutPopupRef.value.close();
		};
	
		// 确认退出登录
		const confirmLogout = () => {
			uni.clearStorage();
			uni.reLaunch({
				url: '/pages/login/login',
			});
		};

	// 打开弹窗
	const openPopup = () => {
		console.log("点击了修改密码按钮");
		popupRef.value.open(); // 使用 ref 打开弹窗
	};

	// 关闭弹窗
	const closePopup = () => {
		popupRef.value.close(); // 使用 ref 关闭弹窗
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		/* 确保容器充满整个屏幕或父容器 */
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
	}
	.content {
		width: 688rpx;
		height: 220rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(153, 153, 153, 0.2);
		z-index: 1;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.content1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 688rpx;
		height: 67rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(153, 153, 153, 0.2);
		z-index: 1;
		margin-bottom: 30rpx;

	}
	.zhujian{
		display: flex;
		justify-content: center;
	}

	.botton {}

	.nihi {
		height: 37vh;
		width: 100vw;
 background: linear-gradient(to bottom right, #4e9af1, #76e1f3);
     z-index: -1;
	}

	.xx {
		width: 30rpx;
		height: 40rpx;
		margin-right: 30rpx;

	}

	.popup-content {
		z-index: 9999;
		/* 确保弹窗显示在最上层 */
	}
.my-input {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.my-view {
    border: 1px solid #000000; /* 边框样式 */
    border-radius: 5px; /* 圆角效果 */
    padding: 5px; /* 内边距让内容和边框之间留出间距 */
    display: inline-block; /* 保证包裹内部内容 */
    margin: 10px 0; /* 上下留出空间 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影提升视觉效果 */
	display: flex;
	flex-direction: column;
}

	.circle {
		width: 113rpx;
		/* 宽度和高度相等，形成正方形 */
		height: 113rpx;
		/* 同上 */
		border-radius: 50%;
		/* 将正方形变成圆形 */
		display: flex;
		/* 使用flex布局，方便后续添加内容（可选） */
		align-items: center;
		/* 垂直居中（可选） */
		justify-content: center;
		/* 水平居中（可选） */
		z-index: 2;
	}

	.tt {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: -50rpx;
	}

	.word {
		margin-left: 20rpx;
		width: 200rpx;
		height: 25rpx;
		font-family: SourceHanSansSC;
		font-weight: 500;
		font-size: 27rpx;
		color: #666666;
		line-height: 37rpx;
	}

	.word1 {
		margin: 0px auto;
		height: 25rpx;
		font-family: SourceHanSansSC;
		font-weight: 500;
		font-size: 27rpx;
		color: #666666;
		line-height: 37rpx;
		margin-top: 20rpx;
	}

	.word2 {
		width: 100rpx;
		height: 31rpx;
		font-family: SourceHanSansSC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 37rpx;

	}

	.vv {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		margin-top: 230rpx;
	}

	/* popup-content 样式 */
	.popup-content {
		padding: 20px;
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		width: 80%;
		max-width: 400px;
		margin: auto;
	}

	/* 表单组样式 */
	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-size: 14px;
		color: #333;
	}

	.form-group input {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		margin-top: 5px;
	}

	/* 提交按钮样式 */
	.submit-btn {
		width: 100%;
		padding: 10px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
	}

	.submit-btn:hover {
		background-color: #005bb5;
	}
	
	.popup-actions {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}
	
.confirm-button {
    background-color: #f56c6c;
    color: #fff;
    padding: 4px 20px;
    border-radius: 5px;
}

.cancel-button {
    background-color: #e0e0e0;
    color: #000;
    padding: 4px 20px; 
    border-radius: 5px;
    margin-left: 10rpx;
}

</style>